<template>
  <div class="app-container">
    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="17" class="card-box">
        <div style="display: flex; justify-content: space-between">
          <listAll @getsalesGrade="getsalesGrade" />
        </div>
      </el-col>

      <!-- <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col> -->
    </el-row>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{ query.salesGrade + " " }}各品类评价分布</span
        >
        <span>
          <el-radio-group
            v-model="groupLabel"
            size="mini"
            @change="selectAllandbad"
          >
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <el-button
            style="margin-left: 5px"
            type="primary"
            size="mini"
            @click="openInfo = true"
            >查看完整数据</el-button
          >
        </span>
      </div>
      <vebar :chartData="echartDataSku" />
    </el-card>

    <el-dialog
      :visible.sync="openInfo"
      width="1000px"
      height="600px"
      append-to-body
      v-if="openInfo"
    >
      <vebarI :chartData="echartDataSkuII" />
    </el-dialog>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>{{ query.salesGrade + " " }}
          {{ groupLabel }}品类差评排名(点击联动)</span
        >
      </div>
      <histogram :chartData="echartDataSkuI" @vchartData="vchartData" />
    </el-card>

    <!-- <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span><i class="el-icon-collection"></i> 各品类评价分布</span>
          </div>
          <PieChart
            :chartData="PieChartData"
            id="PieChartData"
            :height="'400px'"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span><i class="el-icon-collection"></i> 排名 </span>
          </div>
          
        </el-card>
      </el-col>
    </el-row> -->
    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{ query.salesGrade + " " }}品类差评数走势分析</span
        >
        <el-select
          v-model="queryParams.inputValue"
          placeholder="品类"
          clearable
          @change="vchartData"
        >
          <el-option
            v-for="(dict, i) in CategoryList"
            :key="i"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </div>
      <div
        style="margin-left: 2px; margin-right: 2px; height: 410px"
        ref="salesQuantity"
      ></div>
    </el-card>
    <el-row :gutter="20" style="margin-top: 16px">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}差评原因分类占比</span
            >
            <!-- <el-radio-group
              v-model="commentType"
              size="mini"
              @change="getselectCategoryNegativeSecond"
            >
              <el-radio-button
                v-for="(item, index) in commentTypeArr"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group> -->
            <el-select
              v-model="queryParams.inputValue"
              placeholder="品类"
              clearable
              @change="getselectCategoryNegativeSecond"
            >
              <el-option
                v-for="(dict, i) in CategoryList"
                :key="i"
                :label="dict"
                :value="dict"
              />
            </el-select>
          </div>
          <PieChart :chartData="PieChartDataI" id="PieChartDataI" /> </el-card
      ></el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}差评分类数据</span
            >
            <el-select
              v-model="queryParams.inputValue"
              placeholder="品类"
              clearable
              @change="getselectCategoryNegativeSecond"
            >
              <el-option
                v-for="(dict, i) in CategoryList"
                :key="i"
                :label="dict"
                :value="dict"
              />
            </el-select>
          </div>
          <el-table :height="350" :data="SecondData" style="width: 100%" border>
            <el-table-column prop="propertyValue" label="差评原因">
            </el-table-column>
            <el-table-column prop="propertyValueCount" label="数量">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{ query.salesGrade + " " }}差评原因分类统计（按品类）</span
        >
        <span>
          <el-radio-group
            v-model="queryParams.groupLabel"
            size="mini"
            @change="gettableDataII"
          >
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportI"
            >导出</el-button
          >
        </span>
      </div>
      <tableI :tableDataList="tableDataII" />
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectCommentsCategoryStatistics,
  selectCommentsDistributionOne,
  selectCategoryCommentsDistribution,
  selectCategoryNegativeSecond,
  selectCategoryCommentData,
  selectNegativeCommentData,
} from "@/api/comment/BiCommentFirstDwd";
// import KoiCardI from "./zindex/KoiCardI.vue";
// import wordCloud from "./zindex/wordCloud.vue";
import histogram from "./zindex/histogram.vue";
import vebar from "./zindex/vebar.vue";
import vebarI from "./zindex/vebarI.vue";
import tableI from "./zindex/table.vue";
import PieChart from "./components/PieChart";
import date from "./common/date";
import listAll from "./components/listAll";
export default {
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  components: { date, listAll, PieChart, vebar, vebarI, histogram, tableI },
  data() {
    return {
      CategoryList: [],

      tableDataI: [],
      tableDataII: [],
      tableDataIII: [],
      SecondData: [],
      PieChartDataI: {},
      PieChartData: {},

      chartsData: [],
      openInfo: false,
      echartDataSkuII: {},
      echartDataSku: {},
      echartDataSkuI: {},
      queryParams: {},
      //按时间周期tableDataII的参数
      queryParamsII: {},
      groupLabel: "二级",
      typeArr: [
        { value: "一级", label: "一级" },
        { value: "二级", label: "二级" },
        { value: "三级", label: "三级" },
      ],
      commentType: "差评",
      commentTypeArr: [
        { value: "差评", label: "差评" },
        { value: "好评", label: "好评" },
        // { value: "近1年", label: "近1年" },
      ],

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",
      //时间控件
      timeObj: {},

      // query: {
      //   salesGrade: [],
      //   // dateType: "近30天",
      //   startDate: "",
      //   endDate: "",
      //   dateType: "",
      //   // channelType: "shop",
      // },
    };
  },
  created() {},
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectCategoryCommentsDistribution();
        this.getselectbad("差评");
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //选完时间后发请求
    handleChangeTime(timeObj) {
      if (!timeObj.endTime) {
        return;
      }
      this.query.startDate = timeObj.startTime;
      this.query.endDate = timeObj.endTime;
      this.query.dateType = timeObj.dateType;

      this.getselectCategoryCommentsDistribution();
      this.getselectbad("差评");
      this.gettableDataII();
    },
    //
    getsalesGrade(type) {
      this.query.salesGrade = type;

      this.getselectCategoryCommentsDistribution();
      this.getselectbad("差评");
      this.gettableDataII();
      // if (type.length == 1) {
      //   this.query.channelType = "brand";
      // } else if (type.length == 2) {
      //   this.query.channelType = "channel";
      // } else if (type.length == 3) {
      //   this.query.channelType = "shop";
      // }
    },
    gettableDataII() {
      this.queryParamsII = {
        startDate: this.query.startDate,
        endDate: this.query.endDate,
        dateType: this.query.dateType,
        salesGrade: this.query.salesGrade,
        commentType: this.commentType,
        groupLabel: this.queryParams.groupLabel,
      };
      selectCategoryCommentData(this.queryParamsII).then((response) => {
        this.tableDataII = response;
      });
    },

    getselectCategoryNegativeSecond() {
      selectCategoryNegativeSecond({
        ...this.queryParams,
        commentType: this.commentType,
        groupLabel: this.groupLabel,
      }).then((response) => {
        this.SecondData = response;
        this.PieChartDataI = {
          xData: [],
          female: [],
        };
        this.PieChartDataI.xData = response.map((item) => item.propertyValue);
        this.PieChartDataI.female = response.map((item) => {
          // 从当前项中提取 propertyValue 和 propertyValueCount
          const name = item.propertyValue;
          const value = item.propertyValueCount; // 将字符串转换为整数

          // 返回一个包含 name 和 value 的新对象
          return { name, value };
        });
      });
    },
    //只获取差评
    getselectbad(bad) {
      selectCategoryCommentsDistribution({
        ...this.queryParams,
        commentType: bad,
      }).then((response) => {
        this.echartDataSkuI = {
          columns: [],
          rows: [],
        };
        this.echartDataSkuI.rows = response.map((item) => {
          // 解构出dataDateUnit和keywordProperty对象
          const { dataDateUnit, keywordProperty } = item;

          // 合并dataDateUnit和keywordProperty中的属性到一个新对象
          return {
            dataDateUnit,
            ...keywordProperty,
          };
        });

        this.echartDataSkuI.columns = Object.keys(this.echartDataSkuI.rows[0]);
      });
    },
    selectAllandbad() {
      this.getselectCategoryCommentsDistribution();
      this.getselectbad("差评");
    },
    getselectCategoryCommentsDistribution() {
      this.queryParams = {
        startDate: this.query.startDate,
        endDate: this.query.endDate,
        dateType: this.query.dateType,
        salesGrade: this.query.salesGrade,
        groupLabel: this.groupLabel,
      };
      selectCategoryCommentsDistribution(this.queryParams).then((response) => {
        this.CategoryList = response.map((item) => item.dataDateUnit);
        console.log(JSON.stringify(this.CategoryList));
        this.queryParams.inputValue = this.CategoryList[0]
          ? this.CategoryList[0]
          : "";

        this.vchartData();

        this.echartDataSku = {
          columns: [],
          rows: [],
        };
        this.echartDataSku.rows = response.slice(0, 10).map((item) => {
          // 解构出dataDateUnit和keywordProperty对象
          const { dataDateUnit, keywordProperty } = item;

          // 合并dataDateUnit和keywordProperty中的属性到一个新对象
          return {
            dataDateUnit,
            ...keywordProperty,
          };
        });

        this.echartDataSku.columns = Object.keys(this.echartDataSku.rows[0]);

        this.echartDataSkuII = {
          columns: [],
          rows: [],
        };
        this.echartDataSkuII.rows = response.map((item) => {
          // 解构出dataDateUnit和keywordProperty对象
          const { dataDateUnit, keywordProperty } = item;

          // 合并dataDateUnit和keywordProperty中的属性到一个新对象
          return {
            dataDateUnit,
            ...keywordProperty,
          };
        });

        this.echartDataSkuII.columns = Object.keys(
          this.echartDataSkuII.rows[0]
        );
      });
    },
    handleExportI() {
      this.download(
        "comment/BiCommentFirstDwd/selectCategoryCommentDataExport",
        {
          ...this.queryParamsII,
        },
        `handleExportI_${new Date().getTime()}.xlsx`
      );
    },
    //点击的时间
    vchartData(inputValue) {
      if (inputValue) {
        this.queryParams.inputValue = inputValue;
      }
      this.getselectCommentsCategoryStatistics("salesQuantity");
      this.getselectCategoryNegativeSecond();
      this.gettableDataII();
    },
    getselectCommentsCategoryStatistics(property) {
      (this.queryParams.groupLabel = this.groupLabel),
        selectCommentsCategoryStatistics({
          ...this.queryParams,
          commentType: this.commentType,
        }).then((response) => {
          if (response.length == 0) {
            var myChartDom = this.$refs.salesQuantity;

            // 检查是否已经存在ECharts实例
            if (echarts.getInstanceByDom(myChartDom)) {
              // 如果存在，销毁它
              echarts.getInstanceByDom(myChartDom).dispose();
            }
            return;
          }

          let order = { date: [], data: [] };
          order.date = response.map((item) => item.dataDateUnit);
          response.forEach((item) => {
            order.data.push(item.keywordProperty);
          });
          const xData = order.date;

          console.log(JSON.stringify(order.data));
          const keyArray = Object.keys(order.data[0]);
          const series = [];
          keyArray.forEach((key) => {
            series.push({
              name: key,
              data: order.data.map((item) => item[key]),
              type: "line",
            });
          });

          const option = {
            grid: {
              left: "5%",
              top: "10%",
              right: "2%",
              bottom: "10%",
            },
            // 提示框
            tooltip: { trigger: "axis" },
            xAxis: {
              data: xData,
            },
            yAxis: {},
            legend: {
              data: keyArray,
            },
            series,
          };

          const E = echarts.init(this.$refs[property]);

          E.setOption(option);
        });
    },
    // handleGo(path) {
    //   this.$router.push({
    //     path: path,
    //   });
    // },
  },
};
</script>

<style>
</style>